<script lang='ts' setup>
import router from '@/router';
import { ref, defineProps, onMounted } from 'vue';

const menus = ref([]);
const currMenu = ref('');

onMounted(() => {
  const routers = router.getRoutes();
  const adminMenus = routers?.filter(val => val.path.includes('/admin/'));
  menus.value = adminMenus.map(val => {
    const { meta, path, } = val;
    return { title: meta.title, path, }
  });

  currMenu.value = location.hash.split('#')[1];
})

function onLogo(): void {
  router.replace('/')
}
</script>
<template>
  <div class="nav">
    <t-head-menu :value="currMenu">
      <template #logo>
        <img height="28" src="@/assets/logo.png" alt="logo" @click="onLogo" />
      </template>
      <t-menu-item :value="item.name" v-for="item in menus" :key="item.path" :to="item.path">
        {{ item.title }}
      </t-menu-item>
    </t-head-menu>
  </div>
</template>

<style lang="scss" scoped>
.nav {
  width: 100%;
  padding: 0 30px;
}

.t-menu__operations {
  .t-button {
    margin-left: 8px;
  }
}

.t-demo-menu--dark {
  .t-button {
    color: #fff;

    &:hover {
      background-color: #4b4b4b;
      border-color: transparent;
      --ripple-color: #383838;
    }
  }
}
</style>
